<template>
	<view class="detail-con" :style="{ minHeight: heightVal + 'px' }">
		<custom-nav-bar title="巡检仪详情" :navHeight="statusHeight" />
		<!-- todo 处理flv格式播放 -->
		<view :class="['videoBox', turnClass]">
			<flv-player v-if="videoUrl" :streamUrl="videoUrl" ref="childRef"></flv-player>
			<!-- #ifdef APP-PLUS -->
			<view class="inner" ref="player" :src="videoUrl"></view>
			<!-- #endif -->
		</view>
		<view class="btncon">
			<u-button class="w6em" @click="handleTurns" type="primary" :plain="true" text="刷新"></u-button>
		</view>
		<view class="itemBox">
			<view class="leftTxt" style="width: 160rpx">站点名称：</view>
			<u-input class="inputStyle" placeholder="请输入站点名称" v-model="inputWorkName" />
			<u-button class="w4em mlr10" type="primary" @click="handleSearch">查询</u-button>
			<!-- <u-checkbox label="全天" name="1" /> -->
		</view>
		<u-button type="primary" class="bottomBtn" :disabled="inputWorkName == '' || !workId" @click="confirmUp">确认绑定</u-button>

		<!-- 搜索结果 -->
		<view class="searchData" v-if="dataList.length">
			<view class="resTitle">查询结果：</view>
			<view class="itemsbox2">
				<view class="itembox" v-for="(item, index) in dataList" :key="index" @click="clickTarget(item, index)" :class="{ active: activeIndex === index }">
					<view class="itemboxleft">
						<view class="tempBox">
							<view class="innerTxt">{{ item.buildname }}</view>
							<view class="smallTxt">负责人：{{ item.reviewemployeeid }}</view>
						</view>
					</view>
					<view class="itemboxright" v-if="activeIndex == index">
						<view class="btn" @click="confirmSelect(item, index)">确认选择</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import RemoteControl from '@/components/RemoteControl/RemoteControl.vue';
import { getAllBuildPlan, reBindBuildPlan, buildPlanFeedBack, getUrlByDeviceIdAW } from '../../../api/device/index.js';
import FlvPlayer from '@/components/FlvPlayer.vue';

export default {
	components: {
		RemoteControl,
		FlvPlayer
	},
	data() {
		return {
			videoUrl: '',
			turnClass: '', // "video-flip"
			carNo: '', // 车牌号
			showKeyboard: false,
			showRemote: false, // 遥控器展示状态
			workId: '', // 选中的施工计划id
			inputWorkName: '',
			heightVal: undefined,
			dataList: [],
			activeIndex: 0,
			statusHeight: 0
		};
	},
	onLoad(option) {
		this.heightVal = uni.getSystemInfoSync().windowHeight;
		// console.log(this.heightVal);
	},
	mounted() {
		//通过video组件
		// this.videoContext = uni.createVideoContext('androidVideo');
		this.playVedio();
	},
	onShow() {
		this.statusHeight = uni.getStorageSync('systemHeight');
	},
	onReady() {
		this.videoContext = uni.createVideoContext('myVideo');
	},
	onReachBottom() {
		console.log(111);
	},
	methods: {
		//播放视频
		playVedio() {
			let obj = {
				deviceType: '1',
				checkPhone: uni.getStorageSync('userInfo').phone,
				userid: uni.getStorageSync('userInfo').userid,
				deviceid: uni.getStorageSync('userInfo').cn2
			};
			this.videoUrl = '';
			getUrlByDeviceIdAW(obj)
				.then((res) => {
					// console.log(888, res);
					if (res.code == 500) {
						uni.showToast({
							icon: 'none',
							title: res.msg
						});
					}

					if (res.data) {
						uni.showToast({
							icon: 'none',
							title: res.msg,
							duration: 2500
						});
						this.videoUrl = res.data;

						// #ifdef APP-PLUS
						console.log('当前是APP环境');
						this.startPlay();
						// #endif
					}
				})
				.catch((err) => {
					uni.showToast({
						icon: 'none',
						title: err.msg
					});
				});
		},
		//绑定施工计划1
		confirmUp() {
			let obj = {
				buildid: this.workId,
				userid: uni.getStorageSync('userInfo').userid,
				buildname: this.inputWorkName
			};
			reBindBuildPlan(obj).then((res) => {
				console.log(555666, res);
				this.confirmUp2();
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
			});
		},
		//绑定施工计划2
		confirmUp2() {
			let obj = {
				phone: uni.getStorageSync('userInfo').phone,
				planid: this.workId,
				numberplate: ''
			};
			console.log(obj);
			buildPlanFeedBack(obj).then((res) => {
				console.log(777, res);
				uni.showToast({
					icon: 'none',
					title: res.msg
				});
			});
		},
		videoErrorCallback() {
			console.log('播放出错了');
		},
		//播放视频
		startPlay() {
			this.player = plus.video.createVideoPlayer('player', {
				src: this.videoUrl,
				top: '0',
				width: '100%',
				height: '300px',
				autoplay: true,
				controls: false
				// direction: 180
			});

			const webview = this.$scope.$getAppWebview();
			webview.append(this.player);

			//不同机型设置高度
			this.$nextTick(() => {
				const element = this.$refs.player;
			});
		},

		//刷新
		handleTurns() {
			this.playVedio();
		},
		//搜索
		handleSearch() {
			let obj = {
				phone: uni.getStorageSync('userInfo').phone,
				buildname: this.inputWorkName
			};
			getAllBuildPlan(obj).then((res) => {
				console.log(999, res);
				this.dataList = res.data;

				uni.showToast({
					icon: 'none',
					title: '查询成功'
				});

				if (res.data.length) {
					this.listShow = true;
				} else {
					uni.showToast({
						icon: 'none',
						title: '无可查看施工计划'
					});
				}
			});
		},

		//用户点击搜索结果某一项
		clickTarget(target, index) {
			// console.log(target);
			this.activeIndex = index;
		},
		//确认选择
		confirmSelect(item, index) {
			console.log(item);
			this.inputWorkName = item.buildname;
			this.workId = item.planid;

			uni.pageScrollTo({
				scrollTop: 0,
				duration: 150
			});
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .inputStyle {
	padding: 0 20rpx;
}
.u-button {
	border-radius: 12rpx;
}

.leftTxt {
	white-space: nowrap;
}
.u-input {
	border-radius: 12rpx;
	width: 360rpx;
}
.itemBox {
	display: flex;
	width: 690rpx;
	height: 70rpx;
	line-height: 70rpx;
	margin-top: 20rpx !important;
	margin: 0 auto;

	.u-input {
		flex: 0;
	}

	::v-deep .uni-input-input,
	.uni-input-placeholder {
		width: 380rpx !important;
	}
}
::v-deep .remote-control {
	margin: 50rpx 0 !important;
}

::v-deep .bottomBtn {
	width: 690rpx;
	margin: 21rpx auto;
}

.detail-con {
	background: #f4f4f4;

	.videoBox {
		height: 482rpx;
		width: 100%;
		display: block;
		position: relative;
		left: 0;
		right: 0;
		background: #000;

		.inner {
			height: 100%;
		}
	}

	.my-video {
		height: 40vh;
		width: 100%;
	}

	.video-flip {
		transform: rotateY(180deg); /* 水平翻转 */
		/* 或者 */
		// transform: rotateX(180deg); /* 垂直翻转 */
	}

	.w4em {
		width: 4em !important;
	}

	.w6em {
		width: 220rpx !important;
	}

	.btncon {
		display: flex;
		width: 400rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;
		margin-top: 30px;
	}

	.mlr10 {
		margin-left: 9px;
		width: 120rpx !important;
		height: 100%;
	}
}
.paddingBox {
	height: 120rpx;
	width: 100%;
}
.searchData {
	width: 690rpx;
	min-height: 300rpx;
	margin: 35rpx auto;
	border-top: 1rpx solid #ddd;

	.itemsbox2 {
		width: 690rpx;
		// background-color: pink;
		box-sizing: border-box;
		padding-bottom: 90rpx;
		position: relative;
		z-index: 6;

		.itembox {
			min-height: 144rpx;
			width: 690rpx;
			border: 1rpx solid #e0e0e0;
			box-sizing: border-box;
			border-radius: 12rpx;
			background-color: #fff;
			padding: 24rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.itemboxleft {
				width: 500rpx;
				display: flex;
				// background-color: yellow;

				.itemImg {
					display: block;
					width: 96rpx;
					height: 96rpx;
					margin: auto 0;
					margin-right: 16rpx;
					border-radius: 14rpx;
				}

				.tempBox {
					width: 460rpx;
					// background-color: skyblue;

					.innerTxt {
						font-size: 34rpx;
						color: #222222;
						font-weight: 800;
					}

					.smallTxt {
						font-size: 26rpx;
						color: rgba(34, 34, 34, 0.6);
						// white-space: nowrap;
						// overflow: hidden;
						// text-overflow: ellipsis;
						margin-top: 16rpx;
					}
				}
			}

			.itemboxright {
				min-height: 96rpx;
				width: 146rpx;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				// background-color: pink;

				.btn {
					// background-color: #222222;
					background-color: #3c9cff;
					width: 146rpx;
					height: 70rpx;
					line-height: 70rpx;
					color: #fff;
					font-size: 26rpx;
					text-align: center;
					border-radius: 12rpx;
				}
			}
		}

		.active {
			border: 1rpx solid #7de0ff;
			box-sizing: border-box;
			background-color: rgba(247, 251, 255, 1);
		}
	}

	.resTitle {
		padding-top: 20rpx;
		font-size: 34rpx;
		font-weight: bold;
		color: #3c9cff;
		margin-bottom: 20rpx;
		margin-top: 30rpx;
	}

	.tableHead {
		width: 100%;
		height: 84rpx;
		line-height: 84rpx;
		background-color: #ddd;
		border-radius: 12rpx;
		display: flex;
		justify-content: space-between;
		color: rgba(0, 0, 0, 0.85);

		.left {
			width: 530rpx;
			height: 100%;
			text-align: center;
		}

		.right {
			width: 140rpx;
			text-align: center;
		}
	}

	.resItem {
		width: 100%;
		min-height: 40rpx;
		margin: 10rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 0;
		padding-bottom: 25rpx;
		border-bottom: 1rpx solid #ddd;
		color: rgba(0, 0, 0, 0.65);

		.leftThings {
			width: 530rpx;
			height: 100%;
			text-align: center;
		}

		.rightThings {
			width: 140rpx;
			text-align: center;
		}
	}
}
</style>
